<template>
  <div class="w-full h-full flex flex-col bg-gray-100">
    <n-card>
      <n-form
          inline
          :label-width="80"
          label-placement="left"
          :model="formValue"
          :rules="rules"
          :size="size"
          ref="formRef"
      >
        <n-grid x-gap="12" :cols="4">
          <n-gi>
            <n-form-item label="姓名" path="name" class="w-200px">
              <n-input v-model:value="formValue.name" placeholder="输入姓名"/>
            </n-form-item>
          </n-gi>
          <n-gi>
            <n-form-item label="年龄" path="age" class="w-200px">
              <n-input placeholder="输入年龄" v-model:value="formValue.age"/>
            </n-form-item>
          </n-gi>
          <n-gi>
            <n-form-item label="电话号码" path="phone" class="w-200px">
              <n-input placeholder="电话号码" v-model:value="formValue.phone"/>
            </n-form-item>
          </n-gi>
          <n-gi>
            <n-form-item class="w-200px">
              <n-button-group>
                <n-button @click="searchFunc">
                  <n-icon>
                    <Search32Filled></Search32Filled>
                  </n-icon>
                  查询
                </n-button>
                <n-button @click="resetFunc">
                  <n-icon>
                    <ArrowReset32Filled></ArrowReset32Filled>
                  </n-icon>
                  重置
                </n-button>
                <n-button @click="createFunc">
                  <n-icon>
                    <Add16Filled></Add16Filled>
                  </n-icon>
                  新建
                </n-button>
              </n-button-group>
            </n-form-item>
          </n-gi>
        </n-grid>
      </n-form>
    </n-card>
    <div class="flex-1 overflow-hidden w-full">
      <n-card class="w-full ">
        <flextable :column.sync="columns" :tabledata="tabledata"></flextable>
      </n-card>
    </div>
    <div class="w-full juzhong1 my-2">
      <fenye @change="getDataList" ref="fenyeref" :total="total"></fenye>
    </div>
    <modal ref="modalref"></modal>
  </div>
</template>

<script setup name="usermanager">
import modal from "./modal.vue"
import {h} from "vue"
import {useRoute, useRouter} from "vue-router";
import {Add16Filled, ArrowReset32Filled, Search32Filled} from "@vicons/fluent"
import {NButton, NAvatar, useDialog, useMessage} from "naive-ui"
import http from "@/request/request"
import guiling from "@/util/guiling"

const router = useRouter()
const route = useRoute()
const dialog = useDialog()
const message = useMessage()
const formRef = ref(null)
const fenyeref = ref(null)
const modalref = ref(null)
//表单数据
const formValue = ref({})
const rules = ref({})
const size = ref("medium")
const tabledata = ref([
  {"ad": "123"},
])
const total = ref(0)
const columns = ref([
  {
    title: "序号", key: "index", width: 60, show: true, render: (rowData, rowIndex) => {
      return rowIndex + 1
    }
  },
  {title: "昵称", key: "name", show: true},
  {title: "账号", key: "username", show: true},
  {
    title: "创建时间", key: "jg", show: true, render: (rowData, rowIndex) => {
      return h("span", null, {
        default() {
          if (rowData.createTime) {
            return new Date(rowData.createTime).toLocaleString("zh", {
              year: 'numeric',
              month: 'numeric',
              day: 'numeric',
              hour12: false,
              hour: 'numeric',
              minute: 'numeric',
              second: 'numeric'
            })
          } else {
            return ""
          }
        }
      })
    }
  },
  {
    title: "更新时间", key: "u", show: true, render: (rowData, rowIndex) => {
      return h("span", null, {
        default() {
          if (rowData.changeTime) {
            return new Date(rowData.changeTime).toLocaleString("zh", {
              year: 'numeric',
              month: 'numeric',
              day: 'numeric',
              hour12: false,
              hour: 'numeric',
              minute: 'numeric',
              second: 'numeric'
            })
          } else {
            return ""
          }
        }
      })
    }
  },
  {
    title: "头像", key: "rt", show: true, render: (rowData, rowIndex) => {
      return h(NAvatar, {src: rowData.touxiang || ""}, null)
    }
  },
  {
    title: "详情", key: "view", width: 60, show: true, render: (rowData, rowIndex) => {
      return h("div", {}, [
        h(NButton, {
          size: "small", class: {"mx-1": true}, type: "primary", onclick: () => {
            viewOrEdit(rowData, "view")
          },
        }, {
          default: () => {
            return "详情"
          }
        }),
      ])
    }
  },
  {
    title: "编辑", key: "edit", width: 60, show: true, render: (rowData, rowIndex) => {
      return h("div", {}, [
        h(NButton, {
          size: "small", class: {"mx-1": true}, type: "info", onclick: () => {
            viewOrEdit(rowData, "edit")
          },
        }, {
          default: () => {
            return "编辑"
          }
        }),
      ])
    }
  },
  {
    title: "删除", key: "del", width: 60, show: true, render: (rowData, rowIndex) => {
      return h("div", {}, [
        h(NButton, {
          size: "small", class: {"mx-1": true}, type: "error", onclick: () => {
            deleteitem(rowData)
          }
        }, {
          default: () => {
            return "删除"
          }
        }),
      ])
    }
  },
  {
    title: "更多", key: "more", width: 60, show: true, render: (rowData, rowIndex) => {
      return h("div", {}, [
        h(NButton, {size: "small", class: {"mx-1": true}}, {
          default: () => {
            return "更多"
          }
        }),
      ])
    }
  },
])

// 点击删除
const deleteitem = (item) => {
  dialog.warning({
    title: '警告',
    content: '确定删这条数据?',
    positiveText: '确定',
    negativeText: '取消',
    onPositiveClick: () => {
      message.success('确定')
    },
    onNegativeClick: () => {
    }
  })
}
// 点击编辑或者查看
const viewOrEdit = (item, type) => {
  modalref.value.init(type, item)
}

// 点击新建
const createFunc = () => {
  modalref.value.init("add")
}
// 点击重置
const resetFunc = () => {
  guiling(formValue.value)
  fenyeref.value.changeoption({page: 1,})
}
// 点击搜索
const searchFunc = () => {
  console.log("点击查询", formValue.value)
  fenyeref.value.changeoption({page: 1,})
}
// 获取数据
const getDataList = (fenye) => {
  const config = {
    p: fenye.page,
    psize: fenye.pageSize,
  }
  Object.keys(formValue.value).forEach(item => {
    config[item] = formValue.value[item]
  })
  http.getuserlist(config).then(({data}) => {
    if (data.code === 0) {
      tabledata.value = data.items
      total.value = data.total || 1
    }
  })
}
// 生命周期区域
</script>

<style scoped>

</style>